<template>
  <div class="app-main-container">
    <el-form
      ref="form"
      :model="param"
      label-width="120px"
      :rules="rules"
      label-suffix="："
    >
      <el-form-item prop="dbType" label="选择数据库">
        <el-radio
          v-model="param.dbType"
          label="0"
          @change="changeType"
        >BASE库</el-radio>
        <el-radio
          v-model="param.dbType"
          label="1"
          @change="changeType"
        >商户库</el-radio>
      </el-form-item>
      <el-form-item v-if="param.dbType == '1'" prop="shopFlag" label="发布商户">
        <el-radio
          v-model="param.shopFlag"
          label="0"
          @change="changeShop"
        >全部商户</el-radio>
        <el-radio
          v-model="param.shopFlag"
          label="1"
          @change="changeShop"
        >指定商户</el-radio>
      </el-form-item>
      <el-form-item v-if="param.shopFlag == '1'" prop="dbIds">
        <el-checkbox-group v-model="param.dbIds">
          <el-checkbox
            v-for="item in shopList"
            :key="item.id"
            :label="item.id"
          >{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="sql" label="输入sql">
        <el-input v-model="param.sql" type="textarea" :rows="16" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
      <el-form-item label="实时处理日志">
        <div class="update_wrap">
          <div v-if="result.length > 0">
            <div v-for="(item, index) in result" :key="index" class="mb10">
              {{ item.log }}
            </div>
          </div>
          <div v-else class="placeholder9">展示实时展示实时处理日志信息</div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { shopListAble, iterationPub, getIteration } from '@/api'
export default {
  data() {
    return {
      param: {
        dbIds: [],
        dbType: '0'
      },
      result: [],
      rules: {
        shopFlag: [{ required: true, message: '请选择', trigger: 'change' }],
        dbIds: [{ type: 'array', required: true, message: '请选择商户', trigger: 'change' }],
        sql: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      shopList: []
    }
  },
  created() {
    this.getShops()
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const param = { ...this.param }
          param.dbIds = param.dbIds.join(',')
          this.result = []
          iterationPub({ param }).then(res => {
            if (res.errorCode !== '000000') return
            this.getUpdate(res.record.logId)
          })
        }
      })
    },
    changeType() {
      this.$set(this.param, 'dbIds', [])
      this.$set(this.param, 'shopFlag', '')
    },
    changeShop() {
      this.$set(this.param, 'dbIds', [])
    },
    getUpdate(logId, logDetailId = '') {
      getIteration({ param: { logId, logDetailId }}).then(res => {
        if (res.errorCode !== '000000') return
        if (!res.recordList || res.recordList.length === 0) {
          setTimeout(() => {
            this.getUpdate(logId)
          }, 500)
          return
        }
        res.recordList.forEach(item => {
          this.result.push(item)
        })
        const index = res.recordList.length - 1
        if (res.recordList[index].isComplete === '0' && res.recordList[index].status === '1') {
          this.getUpdate(logId, res.recordList[index].logDetailId)
        }
      })
    },
    getShops() {
      shopListAble({ param: {}}).then(res => {
        this.shopList = res.recordList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.update_wrap {
  padding: 6px;
  height: 400px;
  line-height: 28px;
  overflow: auto;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
}
</style>
